<ion-toolbar>
  <ion-title>login</ion-title>
</ion-toolbar>

<ion-content [fullscreen]="true" class="auth-page">
  <ion-grid>
    <ion-row>
      <ion-col class="ion-text-center" size-md="6" size-lg="5" size-xs="12">
        <form [formGroup]="login" (ngSubmit)="onLogin()">
          <div class="logo">
            <img src="./assets/logo/TK_DEFAULT_LOGO.png" width="96px">
          </div>
          <p class="ion-text-center">Ionic Social Network</p>

          <ion-card color="light" class="auth-card ion-margin">
            <ion-item lines="none" color="light">
              <ion-input type="email" placeholder="Email" formControlName="email"></ion-input>
            </ion-item>
            <ion-item lines="none" color="light" class="ion-no-inner-padding-end">
              <ion-input type="password" placeholder="Password" formControlName="password"></ion-input>
              <ion-button slot="end" fill="clear" class="ion-no-margin" [routerLink]="[ '/auth', 'forgot' ]"
                routerDirection="forward">
                <ion-icon slot="icon-only" color="medium" name="help-circle-outline"></ion-icon>
              </ion-button>
            </ion-item>
          </ion-card>

          <ion-button expand="block" class="ion-margin-start ion-margin-end ion-margin-bottom" type="submit"
            [disabled]="!login.valid">
            Log In
          </ion-button>
          <span class="ion-margin"></span>
          <ion-text>or</ion-text>
          <span class="ion-margin"></span>
          <ion-button expand="block" class="ion-margin" [routerLink]="[ '/auth', 'register' ]"
            routerDirection="forward">
            Sign Up
          </ion-button>
        </form>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>